<template>
  <div class="thirdsbLeft">
    <s-title text="事件办理到场次数" :btnshow="false" />
    <div id="thirdsbLeftChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";

export default {
  name: "thirdsbLeft",
  components: {
    sTitle,
  },
  data() {
    return {
      list: [
        { name: "收费事项数", value: 0 },
        { name: "支付网上支付事项数", value: 0 },
        { name: "支付预约事项数", value: 0 },
        { name: "支付物流事项数", value: 0 },
      ],
      ls:[
  {
    "px": 2,
    "lx": "1",
    "mc": "1次",
    "sl": 39,
    "zb": 0.17,
    "zbzf": "0.17%",
    "tjsj": "2021-09-25T20:30:48.000+00:00"
  },
  {
    "px": 1,
    "lx": "0",
    "mc": "0次",
    "sl": 23417,
    "zb": 99.83,
    "zbzf": "99.83%",
    "tjsj": "2021-09-25T20:30:48.000+00:00"
  },
  {
    "px": 3,
    "lx": "2",
    "mc": "1次以上",
    "sl": 0,
    "zb": 0,
    "zbzf": "0.00%",
    "tjsj": "2021-09-25T20:30:48.000+00:00"
  }
]
    };
  },
  mounted() {
    axios.get(this.$serverIp + "getThingScene").then((res) => {
      this.list = [];
     // res = this.ls;
      for(var i=0;i<res.data.length;i++){
        this.list.push({
          name: res.data[i].mc,
          value: res.data[i].sl,
        })
      }
      // for (let i = 0; i < res.data.length; i++) {
      //   this.list.push({
      //     name: res.data[i].mc,
      //     value: res.data[i].sl,
      //   });
      // }

      this.setEchartHandle();
    });
  },
  methods: {
    setEchartHandle() {
      let _echarts = this.$echarts.init(
        document.getElementById("thirdsbLeftChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let me = this;
      var color = "#fff";
      let xAxisData = [];
      let seriesData = [];
      let topData = [];
      let botData = [];
      let sum = 0;
      let barTopColors = ["#FBAB58", "#1FC2FC", "#669BFF", "#0150CF"];
      var barBotColors = ["#FDE364", "#6BFFF3", "#77BFFF", "#0EC3FF"];

      this.list.map((item) => {
        xAxisData.push(item.name);
        seriesData.push(item.value);
        sum += item.value;
      });
      this.list.map((it) => {
        topData.push(sum);
        botData.push(1);
      });
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params, ticket, callback) {
            const item = params[2];
            return item.name + " : " + item.value;
          },
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "3%",
          bottom: "15%",
          containLabel: true,
        },

        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: color,
              opacity: color == "#fff" ? 0.3 : 1,
            },
          },
          axisLabel: {
            show: true,
            margin: 10,
            interval: 0,
            textStyle: {
              color: color,
              lineHeight: 18,
              rich: {
                a: {
                  fontSize: 12,
                  color: "#ffffff",
                },
                b: {
                  fontSize: 18,
                  color: "#FDD65D",
                  fontWeight: "bold",
                },
                c: {
                  fontSize: 18,
                  color: "#3AD8F8",
                  fontWeight: "bold",
                },
                d: {
                  fontSize: 18,
                  color: "#68A0FF",
                  fontWeight: "bold",
                },
                e: {
                  fontSize: 18,
                  color: "#0366D8",
                  fontWeight: "bold",
                },
              },
            },
            formatter: function (val, index) {
              var strs = val.split("");
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % 5)) str += "\n";
              }
              if (index === 0) {
                return (
                  "{a| " + str + "}" + "\n" + "{b|" + me.list[index].value + "}"
                );
              } else if (index === 1) {
                return (
                  "{a| " + str + "}" + "\n" + "{c|" + me.list[index].value + "}"
                );
              } else if (index === 2) {
                return (
                  "{a| " + str + "}" + "\n" + "{d|" + me.list[index].value + "}"
                );
              } else if (index === 3) {
                return (
                  "{a| " + str + "}" + "\n" + "{e|" + me.list[index].value + "}"
                );
              }
            },
          },
          interval: 0,
        },
        yAxis: {
          // name: "面积：㎡",
          nameTextStyle: {
            color: color,
            fontSize: 12,
          },
          splitLine: {
            show: color == "#fff" ? false : true,
            lineStyle: {
              color: color,
              opacity: 0.1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            textStyle: {
              fontSize: 12,
              color: color,
            },
          },
          splitNumber: 3,
        },
        series: [
          {
            name: "柱顶部",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 16,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColors[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              fontWeight: "bold",
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barBotColors[params.dataIndex];
                  },
                },
              },
              formatter: function (params, index) {
                return ((params.value / sum) * 100).toFixed(1) + "%";
              },
            },
            symbolPosition: "end",
            data: seriesData,
          },
          {
            name: "柱底部",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 5],
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
              },
            },
            data: botData,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
                opacity: 0.4,
              },
            },
            z: 11,
            silent: true,
            barWidth: 40,
            barGap: "-100%", // Make series be overlap
            data: seriesData,
          },
          {
            name: "最上层立体圆",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 13,
            itemStyle: {
              normal: {
                color: color == "#fff" ? "#595D78" : "#E5E5E5",
              },
            },
            symbolPosition: "end",
            data: topData,
          },
          {
            //上部立体柱
            stack: "1",
            type: "bar",
            z: 9,
            itemStyle: {
              normal: {
                color: color == "#fff" ? "rgba(255,255,255,.1)" : "#F5F5F5",
              },
            },
            silent: true,
            barWidth: 40,
            barGap: "-100%", // Make series be overlap
            data: topData,
          },
        ],
      };
      _echarts.setOption(option);
    },
  },
};
</script>
<style scoped>
.thirdsbLeft {
}
#thirdsbLeftChart {
  width: 100%;
  height: 27vh;
  margin-top: 10px;
}
</style>
 